<template>
  <div id="fleetViewDetail" class="list">
    <div class="breadcrumb">
			<Breadcrumb separator=">">
				<BreadcrumbItem to="">车队视图</BreadcrumbItem>
				<BreadcrumbItem to="/fleet/fleetView">车队视图</BreadcrumbItem>
				<BreadcrumbItem to="/fleet/detail">历史数据</BreadcrumbItem>
			</Breadcrumb>
			<div class="btns">
				<ButtonGroup>
	        <Button type="text" @click=""><i class="fa fa-download"></i><span>导出</span></Button>
	    	</ButtonGroup>
			</div>
		</div>

    <TableSearch>
      <Form :label-width="80">
        <Row :gutter="16">
          <Col :md="8">
            <ButtonGroup style="width:60%;">
              <Button type="ghost" @click="changeType('date')" :class="{'active':searchType==='date'}" style="width:50%;">日</Button>
              <Button type="ghost" @click="changeType('month')" :class="{'active':searchType==='month'}" style="width:50%;">月</Button>
            </ButtonGroup>
          </Col>
          <Col :md="8">
            <FormItem label="统计日期">
              <Row>
                <Col :md="10"><DatePicker v-model="searchForm.sTime" :type="searchType" :options="sTimeOption" :editable="false" :clearable="false" placeholder="开始日期" style="width:100%;"></DatePicker></Col>
                <Col :md="4"><div style="text-align:center;">至</div></Col>
                <Col :md="10"><DatePicker v-model="searchForm.eTime" :type="searchType" :options="eTimeOption" :editable="false" :clearable="false" placeholder="结束日期" style="width:100%;"></DatePicker></Col>
              </Row>
		        </FormItem>
          </Col>
          <Col :md="8">
            <FormItem label="选择车队">
              <Select v-model="searchForm.teamid" placeholder="请选择车队" clearable>
                <Option :value="1">XXX车队</Option>
              </Select>
		        </FormItem>
          </Col>
        </Row>
      </Form>
			<Button type="primary" class="search-btn" icon="search" @click="" long>查询</Button>
		</TableSearch>

    <div class="main">
      <Tabs type="card" v-model="tabflag" :animated="false">
        <TabPane name="0" label="统计表">
          <div class="table-content">
						<div class="table" style="margin:0;">
							<table>
								<thead>
									<th width="18%">统计合计</th>
									<th width="12%">行驶里程合计</th>
									<th width="12%">行驶时长合计</th>
									<th width="15%">不良操作行为合计</th>
									<th width="15%">不良驾驶行为合计</th>
									<th>违章合计</th>
                  <th>故障合计</th>
                  <th width="15%">平均综合安全指数</th>
								</thead>
								<tbody>
									<tr v-for="(v,i) in [0]" :key="`driver-total-list-${i}`">
										<td>2018-06-01 至 2018-6-30</td>
										<td>6254公里</td>
										<td>323小时54分钟</td>
										<td>13次</td>
										<td>22次</td>
										<td>37次</td>
										<td>3</td>
										<td>87</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
          <div class="table-content">
						<div class="table">
							<table>
								<thead>
									<th width="18%">统计日期</th>
									<th width="12%">行驶里程</th>
									<th width="12%">行驶时长</th>
									<th width="15%">不良操作行为</th>
									<th width="15%">不良驾驶行为</th>
									<th>违章数</th>
                  <th>故障数</th>
                  <th width="15%">平均综合安全指数</th>
								</thead>
								<tbody>
									<tr v-for="(v,i) in [0,1,2,3,4]" :key="`driver-detail-list-${i}`">
										<td>2018-06-01</td>
                    <td>254公里</td>
										<td>3小时54分钟</td>
										<td>3次</td>
										<td>2次</td>
										<td>2次</td>
										<td>0</td>
										<td>87</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
          <Spin size="large" fix v-if="isLoading"></Spin>
        </TabPane>
        <TabPane name="1" label="安全指数趋势图">
          <div id="safetyLineChart" style="width:100%;height:340px;"></div>
        </TabPane>
      </Tabs>
    </div>


  </div>
</template>
<style lang="less" src="@/assets/styles/fleet/fleet-view-detail.less"></style>

<script>
  import moment from 'moment'
  import EChart from '@/plugin/EChart'

  export default {
    mounted(){

    },
    data(){
      return {
        searchType:'date',
        tabflag:'0', // 0=统计表，1=安全指数趋势图
        isLoading:false,

        chart:null,
        searchForm:{
          sTime:moment(moment().subtract(30,'d').format('YYYY-MM-DD')).toDate(),
          eTime:moment(moment().subtract(1,'d').format('YYYY-MM-DD')).toDate()
        },
      };
    },
    watch:{
      tabflag(v){
        if (v==='1'){
          if (!this.chart){
            this.$nextTick(() => {
              this.createLineChart();
            });
          }
        }
      }
    },
    computed:{
      sTimeOption(){
        let t = this.searchType;
        if (t === 'date'){
          return {
            disabledDate:(d) => {
              let max = moment(this.searchForm.eTime||moment().toDate()).toDate();
              let min = moment(this.searchForm.eTime||'1900-01-01').subtract(30,'d').toDate();
              return min >= d || d > max;
            }
          };
        }else{
          return {
            disabledDate:(d) => {
              let max = moment(this.searchForm.eTime||moment().toDate()).toDate();
              let min = moment(moment(this.searchForm.eTime).format('YYYY-MM')).subtract(5,'M').toDate();
              return min > d || d > max;
            }
          };
        }
      },
      eTimeOption(){
        let t = this.searchType;
        if (t === 'date'){
          return {
            disabledDate:(d) => {
              let max = moment(moment().format('YYYY-MM-DD')).subtract(1,'d').toDate();
              let mmax = moment(this.searchForm.sTime).add(30,'d').toDate();
              max = max <= mmax ? max : mmax;
              let min = moment(this.searchForm.sTime).toDate();
              return !(d >= min && d <= max);
            }
          };
        }else{
          return {
            disabledDate:(d) => {
              let max = moment(moment().format('YYYY-MM')).toDate();
              let mmax = moment(this.searchForm.sTime).add(5,'M').toDate();
              max = max <= mmax ? max : mmax;
              let min = moment(moment(this.searchForm.sTime).format('YYYY-MM')).toDate();
              return !(d >= min && d <= max);
            }
          };
        }
      }
    },
    methods:{
      moment,
      changeType(v){
        this.searchType = v;
      },
      createLineChart(){
        this.chart = new EChart('safetyLineChart', {
          title:{show:false},
          toolbox:{show:false},
          color:['#9E6A93'],
          grid:{x:30,y:20,right:0,bottom:50},
          tooltip : {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            axisLabel:{interval:0,rotate:45},
            data: (function(){
              let lst = [];
              for (let i = 30; i >= 1; i--){
                let m = moment().subtract(i,'d').format('M月D日');
                lst.push(m);
              }
              return lst;
            })()
          },
          yAxis: {type:'value',splitNumber:7,min:0},
          series: [{
            name: '安全指数',
            type: 'line',
            smooth: true,
            data: (function(){
              var res = [];
              for (let i = 0; i < 30; i++){
                res.push(Math.floor(Math.random()*12)+1);
              }
              return res;
            })()
          }]
        });
      }
    }
  }
</script>
